<template> 
  <div> 
    <el-header>
      <div class="heade"> 
        <div class="title-left">
          <el-button
            size="large"
            @click.native="backtoHome" icon="el-icon-arrow-left" plain>返回</el-button>  
        </div>        
        <div class="title">
          <h1>饮食列表</h1> 
        </div>       
      </div>   
    </el-header>
    <div class="total-border">    
      <div class="heade"> 
        <input type="text" class="item" v-model="input" placeholder="搜索食物名称" @keydown.enter="onSearch()"/>
        <div class="item-search">
          <el-button
          @click.native="onSearch()" icon="el-icon-search" style="font-size:15px" plain>搜索</el-button> 
        </div>
      </div>
      <div class="list-item">
        <el-table
        :show-header="false"
        :data="list"
        height="500"
        border
        style="width: 100%;font-size:15px">
          <el-table-column
            prop="name"
            label="食物名称"
            style="width: 33%">
          </el-table-column>
          <el-table-column
            prop="kcal"
            label="份量"
            style="width: 33%"
            :formatter="formatter">
          </el-table-column>
          <el-table-column label="操作"  style="width: 33%">
            <template slot-scope="scope">
              <el-button
                size="medium"
                @click="handleEdit(scope.$index, scope.row)">添加</el-button> 
            </template>
          </el-table-column>
        </el-table>
      </div>       
    </div>
  </div>
</template> 
<script>
import { get } from "../ajax";
export default {
  name: "DietList",
  data() {
    return {
      list:[],
      input:"",
    };
  },
  async mounted(){
    const res=await get('/SmartMachine/api/Diet/dietList',{})
    this.list=res.data;
  },
  methods: {
    handleEdit(index, row) {
      const userId=this.$route.query.userId;
      const type=this.$route.query.type;
      const date=this.$route.query.date;
      const dietId=row.id;
      this.$router.push({
        path:"/addDiet",
        query:{
          userId:userId,
          type:type,
          date:date,
          dietId:dietId,
        }
      })
    },

    formatter(row){
      return row.kcal+`kcal/`+row.unit;
    },

    async onSearch(){
      const res=await get("/SmartMachine/api/Diet/search",{
        body:{
          name:this.input,
        }
      })
      this.list=res.data;
    },

    backtoHome(){
      this.$router.push({
        path: "/diet",
        query:{
          userId:this.$route.query.userId,
          date:this.$route.query.date,
        }
      })
    }
  },

};
</script> 
<style scoped>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
  margin: 20px;
}
.heade {
  display: flex;
  margin-left: 130px;
  margin-bottom: 20px;
  text-align: center;
  border-radius: 15px;
}
.total-border {
  width: 97.5%;
  height: 600px;
  border: 1px solid #ccc;
  margin: 20px;
}
.item {
  flex: 0 0 70%;
  margin-top: 10px;
  border: 1px solid #ccc;
  text-align: center;
  font-size: 15px;
  height: 40px;
  display: inline-block;
  border-radius: 15px;
  line-height: 15px;
}
.item-search {
  flex: 0 0 10%;
  margin: 10px;
}
.list-item {
  margin: 8px;
}
.title {
  flex: 0 0 30%;
  margin-top: 20px;
  margin-left: 32%;
  font-size: 10px;
  line-height: 5px;
}
.table {
  width: 100%;
  height: 260px;
  font-size: 15px;
  border: 1px solid #ccc;
}
.title-left {
  margin-left: -20%;
}
</style> 

